﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
@* 角色分配权限 *@

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Demo</title>
	<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
	<link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
</head>
<body>
	<div class="layui-form layui-row layui-col-space16">
		<form class="layui-form" id="permissionForm">
			<div class="layui-col-md6">
				<label class="layui-form-label">角色</label>
				<select name="roleId" id="RolesSel" lay-search>
					<option value="">请选择角色</option>
				</select>
			</div>

			<div class="layui-col-md6">
				<label class="layui-form-label">权限</label>
				<select name="menuId" id="MenusSel" lay-search>
					<option value="">请选择权限</option>
				</select>

			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-blue" lay-submit lay-filter="WuLiao">确定</button>
					<button class="layui-btn layui-btn-normal" type="reset">重置</button>
				</div>
			</div>
		</form>

	</div>



	<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
	<script src="//unpkg.com/layui@2.10.3/dist/layui.js"></script>
	<script>
		layui.use(['tree', 'form', 'layer', 'jquery'], function () {
			var tree = layui.tree;
			var form = layui.form;
			var layer = layui.layer;
			var $ = layui.jquery;

			//角色
			initSelectData();
			function initSelectData(){
			$.ajax({
					type: 'GET',
					url: 'https://localhost:7174/api/Message/GetRoleAll',
					//url: "@ViewBag.BaseUrl/T5/Message/GetRoleAll",
					dataType: 'json',
					success: function (res) {
						if (res.code === 0) {
							var options = '';
							// 遍历后端返回数据
							$.each(res.data, function (index, item) {
								options += '<option value="' + item.roleId + '">' + item.roleName + '</option>';
							});
							// 添加到下拉框
							$('#RolesSel').append(options);
							// 渲染下拉框
							form.render('select');
						} else {
							layer.msg('获取数据失败：' + res.msg);
						}
					},
					error: function (xhr, status, error) {
						layer.msg('网络请求失败，请检查网络！');
						console.error(error);
					}
				});
			}


			//权限
			initSelectmenu();
			function initSelectmenu(){
			$.ajax({
				type: 'GET',
					url: 'https://localhost:7174/api/Message/GetMenuAll',
					//url: "@ViewBag.BaseUrl/T5/Message/GetMenuAll",
					dataType: 'json',
					success: function (res) {
						if (res.code === 0) {
							var options = '';
							// 遍历后端返回数据
							$.each(res.data, function (index, item) {
								options += '<option value="' + item.menuId + '">' + item.menuName + '</option>';
							});
							// 添加到下拉框
							$('#MenusSel').append(options);
							// 渲染下拉框
							form.render('select');
						} else {
							layer.msg('获取数据失败：' + res.msg);
						}
					},
					error: function (xhr, status, error) {
						layer.msg('网络请求失败，请检查网络！');
						console.error(error);
					}
				})
			}


			form.on('submit(WuLiao)', function (data){				
				var fromData={
					roleId: data.field.roleId,  
					menuId: data.field.menuId   
				}
				console.log("提交数据:", fromData)
				// 显示加载中提示
				var index = layer.load(1, {
					shade: [0.1,'#fff'] // 0.1透明度的白色背景
				});
				$.ajax({
					url: 'https://localhost:7272/api/Message/InsertRoleMenu',
					//url: "@ViewBag.BaseUrl/T6/Message/InsertRoleMenu",
					type: 'POST',                               // 请求方法
					contentType: 'application/json',            // 内容类型为JSON
					data: JSON.stringify(fromData),								// 将表单数据转为JSON字符串
					dataType: 'json',                           // 预期服务器返回的数据类型
					success:function(res){
						layer.close(index);
						console.log("响应数据:", res)
						if(res.code == 212){
							layer.alert('成功')
						}
						else {
							// 失败提示
							layer.alert(res.test, {
								title: '操作失败',
								icon: 2 // 图标类型：2=失败
							});
						}						
					}
				})
				return false;
			 });
		});

	</script>




</body>
</html>
